<template>
  <div class="scan">
    <v-title :title="$route.meta.title" />
    <loading :show="loading" />
    <arrow />
    <div class="pay shadow">
      <div class="title">{{ merchant.name }}</div>
      <div class="amount">
        <span class="text">支付金额:</span>
        <span class="value">
          <cube-input type="text" v-model="amount" ref="amount" />
        </span>
      </div>
      <div class="submit" :class="{'disabled': disabled}" @click="submit">立即支付</div>
      <div class="desc">
        <p v-if="true">用户余额: {{ +user.balance }}</p>
        <p v-if="true">用户积分: {{ +user.score }}</p>
        <p>商家联系电话: {{ merchant.mobile }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import Title from '@/components/Title'
import Loading from '@/components/Loading'
import Arrow from '@/components/Arrow'
import api from '@/api'
import base64 from '@/util/base64'

export default {
  components: {
    'v-title': Title,
    Loading,
    Arrow
  },
  data() {
    return {
      loading: false,
      id: 0,
      amount: 100,
      disabled: false,
      merchant: {
        mobile: '',
        name: '',
      },
      user: {
        balance: 0,
        score: 0
      }
    }
  },
  methods: {
    fetch() {
      api.Supplier.view({ id: this.id }).then(response => {
        let { data } = response
        data = base64.parse(data)
        console.log(data)
        this.merchant = data.supplier
        this.user = data.account
      })
    },
    submit() {
      if (isNaN(+this.amount) || +this.amount < 0.1) {
        return this.$createToast({
          type: 'error',
          time: 1000,
          txt: '支付金额错误'
        }).show()
      }
      api.Supplier.saveScan({
        id: this.id,
        amount: this.amount
      }).then(response => {
        let { data } = response
        data = base64.parse(data)

        // console.log(data)

        // 不需要支付现金
        if (+data.use_money <= 0) {
          return this.$createToast({
            type: 'correct',
            time: 1000,
            txt: '支付成功',
            onTimeout: () => {
              this.$router.push('/service/order/0')
            }
          }).show()
        }

        const serial = {
          order_id: data.order_id
        }
        // serial = JSON.stringify(serial)
        // console.log(serial)

        this.$router.push(`/pay/${base64.encode(serial)}`)
      })
    }
  },
  created() {
    this.id = this.$route.params.id
    this.fetch()
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.amount.focus()
    })
  }
}
</script>

<style scoped lang="stylus">
.scan
  padding-top 45px
  .pay
    background white
    padding 10px
    margin 10px
    border-radius 10px
    min-height 300px
    .title
      height 45px
      line-height 45px
      font-weight 700
      font-size 16px
    .submit
      background $main_color
      display inline-block
      padding 10px 25px
      border-radius 5px
      font-weight 700
      color white
      &.disabled
        background #ccc
        color #eee
    .amount
      padding 50px 20px
      display flex
      justify-items center
      .text
        width 120px
        //background red
        line-height 40px
        text-align right
      .value
        flex 1
        padding-right 50px
        padding-left 10px
    //background blue
    .desc
      margin-top 100px
      margin-bottom 30px
      p
        height 20px
        text-align left
</style>
